<template>
	<div class="income_details">
		<div style="position: sticky; top: 0; z-index: 9;display: none;">
			<header>
				<div>
					<span>累计收益（元）</span>
					<span @click="router.push({ name: 'withdrawalRecord' })"
						>提现明细<van-icon name="arrow" color="#999999"
					/></span>
				</div>
				<div>
					<div class="amount">
						￥<span>{{ state.total_balance }}</span>
					</div>
					<van-button class="btn" type="primary" @click="router.push({ name: 'withdrawal' })">立即提现</van-button>
				</div>
				<div style="font-size: 14px">
					<span>可提现￥{{ state.balance }}</span>
					<span>已提现￥{{ state.balance_history }}</span>
					<!-- <span>在途收益￥123.00</span> -->
				</div>
			</header>

			 <van-tabs
				v-model:active="state.active"
				line-width="30px"
				line-height="4px"
				color="#F84B9B"
				title-inactive-color="#999999"
        :before-change="tabsBeforeChange"
			>
				<van-tab v-for="item of state.tabs" :title="item" :key="item"></van-tab>
			</van-tabs>
		</div>

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getMyCommissionRecords"
		>
			<div class="list_item" v-for="item of state.commissionRecords">
				<div class="header">
					<span>订单信息：{{ item.describe }}</span>
					<!-- <span>在途收益</span> -->
				</div>
				<div class="info">
					<van-image round width="38px" height="38px" fit="cover" lazy-load :src="item.store.storeimgs" />
					<div class="right">
						<div class="">
							<span>{{ item.store.title }}</span>
							<span style="color: #f82254; font-size: 17px">+{{ item.amount }}</span>
						</div>
						<div class="time">时间：{{ item.add_time }}</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/index';
import { myCommissionRecords,getAmountByMemberBalance } from '@/api/my';

const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
    state:0,
    isStore:1
	},
	active: 0,
	loading: false,
	finished: false,
  tabs: ['可提现', '冻结中', '已失效'],
	commissionRecords: [],
  total_balance:0,
  balance:0,
  balance_history:0
});

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
  state.pageInfo.state = name;
  state.pageInfo.pageIndex = 1;
  state.commissionRecords = [];
  getMyCommissionRecords();
  return true;
};

const getMyCommissionRecords = async () => {
  if (mainStore.storeIsLogin) {
    state.pageInfo.user_id = mainStore.storeInfo.member.user_id
  }
	const res = await myCommissionRecords(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.commissionRecords = [...state.commissionRecords, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};
</script>

<style lang="scss" scoped>
:deep(.van-tabs) {
	width: 100%;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;

	.van-tabs__wrap {
		height: 50px !important;
		.van-tabs__nav {
			justify-content: space-between;
			.van-tab {
				flex: auto;
				padding: 0;
				font-size: 13px;
			}
			.van-tab--active {
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
}
.income_details {
	header {
		@include flx-direction-between;
		height: 140px;
		box-sizing: border-box;
		padding: 20px 15px;
		font-size: 13px;
		background: white;
		& > div {
			@include flx-justify-between;
		}
		.amount {
			font-size: 20px;
			font-weight: 400;
			span {
				font-size: 33px;
			}
		}
		.btn {
			height: 25px;
			padding: 0 10px;
			border: none;
			border-radius: 13px;
			font-size: 12px;
			line-height: 25px;
			background: linear-gradient(-84deg, #f53d7d, #fb56b3);
		}
	}
	.list {
		padding: 10px 15px 0 15px;
		.list_item {
			height: 116px;
			box-shadow: 0px 1px 2px 0.5px rgba(153, 153, 153, 0.2);
			border-radius: 3px;
			margin-bottom: 10px;
			.header {
				@include flx-justify-between;
				height: 40px;
				padding: 0 10px;
				border-bottom: 1px solid #e6e6e6;
				font-size: 11px;
				color: #666666;
			}
			.info {
				@include flx-justify-between;
				align-items: flex-start;
				padding: 10px 15px 20px 15px;
				.right {
					flex: 1;
					margin-left: 15px;
					font-size: 15px;
					color: #1a1a1a;
					div {
						@include flx-justify-between;
					}
					.time {
						margin-top: 5px;
						color: #666666;
						font-size: 12px;
					}
				}
			}
		}
	}
}
</style>
